import axios from 'axios';
import React, { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { List } from 'react-vant'
export interface ListRawState {
  id: string
  image: string
  title: string
  desc: string
  price: number
}

const Index: React.FC = () => {
  const [list, setList] = useState<ListRawState[]>([]);
  const [pageCode, setPageCode] = useState(1)
  const navigate = useNavigate()
  const getList = async () => {
    const resp = await axios.get('/api/list', { params: { pageCode } })
    setList(list.concat(resp.data.data))
    setPageCode(pageCode + 1)
  }


  return (
    <div className='home'>
      <List className="list" onLoad={getList}>
        {
          list.map((v, i) => {
            return <dl key={i} onClick={() => navigate(`/detail/${v.id}`)}>
              <dt>
                <img src={v.image} alt="" />
              </dt>
              <dd>
                <h3>
                  <span>{v.title}</span>
                  <span>{v.id}</span>
                </h3>
                <p>{v.desc}</p>
                <p>单价：{v.price}</p>
              </dd>
            </dl>
          })
          }
      </List>
    </div>  
  )
}

export default Index